<template>
  <div class="coupon">
    <!-- 面包屑导航 -->
    <div class="center-w">
      <div class="head">
        <div class="title">优惠规则管理</div>
      </div>
      <div class="formClass">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户每日砍价次数：" prop="haggleCount">
            <el-input
              v-model="ruleForm.haggleCount"
              size="small"
              type="number"
              placeholder="请输入用户每日砍价次数"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否启用：">
            <el-switch
              v-model="ruleForm.active"
              :active-value="true"
              :inactive-value="false"
            ></el-switch>
          </el-form-item>
          <el-form-item label="减免基础金额梯度：">
            <div
              class="rules_container"
              v-for="(item, index) in ruleForm.rules"
              :key="index"
            >
              满<el-input
                v-model="item.amount"
                size="small"
                style="width: 100px;margin: 0 10px;"
              ></el-input
              >元， 每一刀砍价最高比例<el-input
                v-model="item.ratio"
                type="number"
                size="small"
                :min="1"
                style="width: 80px;margin: 0 10px;"
              ></el-input
              >%
              <div style="margin-left: 5px;">
                <i
                  class="el-icon-remove-outline"
                  style="font-size: 20px;color: red;"
                  v-if="index != 0"
                  @click="reduceHandle(index)"
                ></i>
                <i
                  class="el-icon-circle-plus"
                  style="font-size: 20px;color: #409eff;"
                  v-if="index == ruleForm.rules.length - 1"
                  @click="addHandle()"
                ></i>
              </div>
            </div>
          </el-form-item>
        </el-form>
        <div style="display: flex;justify-content: center;margin-top: 100px;">
          <el-button type="success" @click="submitBargain('ruleForm')">更新</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
import uploadImg from "../../components/uploadImg";

import { createBargain, getBargainList } from "../../api/bargain";
export default {
  data() {
    return {
      addCouponShow: false,
      currentFlag: 0,
      ruleForm: {
        id: null,
        haggleCount: 1,
        active: false,
        rules: [
          {
            amount: "",
            ratio: ""
          }
        ]
      },
      couponList: [],
      list: [],
      userList: [],
      rules: {
        haggleCount: [
          { required: true, message: "请输入用户每日砍价次数", trigger: "blur" }
        ]
      },
      pageparm: {
        pageIndex: 1,
        pageSize: 10,
        total: 0
      },
      //优惠券请求搜索条件
      pageparmCoupon: {
        pageIndex: 1,
        pageSize: 999,
        searchKey: ""
      },
      tableData: []
    };
  },
  name: "coupon",
  components: {
    Pagination,
    uploadImg //上传图片
  },

  created() {
    this.getBargainList();
  },

  methods: {
    //去除规则
    reduceHandle(index) {
      this.ruleForm.rules.splice(index, 1);
    },
    //添加规则
    addHandle() {
      this.ruleForm.rules.push({
        amount: "",
        ratio: ""
      });
    },
    //获取优惠规则列表
    async getBargainList() {
      const res = await getBargainList(this.pageparm);
      if (res.code == 200) {
        if (res.data) {
          this.ruleForm = res.data;
        }
      }
    },

    //确认提交
    submitBargain(ruleForm) {
      if(!this.ruleForm.haggleCount){
        return this.$message.error("请输入用户每日砍价次数");
      }
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          let req = {
            haggleCount: this.ruleForm.haggleCount,
            active: this.ruleForm.active,
            rules: this.ruleForm.rules
          };
          createBargain(req).then(res => {
            if (res.code == 200) {
              this.$message.success("更新成功");
              this.addCouponShow = false;
              this.getBargainList();
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          return false;
        }
      });
    },

    // 分页插件事件
    callFather(parm) {
      this.pageparm.pageIndex = parm.pageIndex;
      this.pageparm.pageSize = parm.size;
      this.getBargainList();
    }
  }
};
</script>

<style lang="less" scoped>
.center-w {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  height: 80vh;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 20px;
  .title {
    color: rgba(16, 16, 16, 1);
    font-size: 20px;
    margin-bottom: 10px;
  }
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .formClass {
    width: 60%;
    height: 90%;
    border: 1px solid #cccccc;
    border-radius: 5px;
    padding-top: 10px;
    box-sizing: border-box;
    margin: 0 auto;
    overflow-y: scroll;
  }
}
.el-input {
  max-width: 300px !important;
}
input {
  text-align: center;
  border-radius: 5px;
  width: 40px;
  height: 25px;
  outline: none;
  margin: 0 10px;
  border: 1px solid #ccc;
}
.rules_container {
  display: flex;
  align-items: center;
}
</style>
